<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="1200px"
      append-to-body
      custom-class="import-dialog"
      @close="close"
    >
      <div class="form-box" v-loading="loading">

        <el-descriptions title="换房信息" :column="2">
          <el-descriptions-item label="原房源">{{
              form.order.premisesAddress
            }}
          </el-descriptions-item>
          <el-descriptions-item label="租住周期"
          >{{ form.order.checkInTime|formatDate('YYYY-MM-DD') }}至{{
              form.order.checkOutTime|formatDate('YYYY-MM-DD')
            }}
          </el-descriptions-item
          >
          <el-descriptions-item label="换后房源">{{
              form.order.order ? form.order.order.premisesAddress : ''
            }}
          </el-descriptions-item>
          <el-descriptions-item label="新租住周期" v-if="form.order.order"
          >{{ form.order.order.checkInTime|formatDate('YYYY-MM-DD') }}至{{
              form.order.order.checkOutTime|formatDate('YYYY-MM-DD')
            }}
          </el-descriptions-item
          >
          <el-descriptions-item label="换房日期" v-if="form.order.order">{{
              form.order.changeDate|formatDate('YYYY-MM-DD')
            }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="申请信息" :column="2">
          <el-descriptions-item label="操作人">
            {{ form.createBy }}
          </el-descriptions-item
          >
          <el-descriptions-item label="申请时间">
            {{ form.createTime }}
          </el-descriptions-item
          >
        </el-descriptions>
        <el-descriptions title="审核结果" :column="2" v-if="form.auditRecordState == 2 || form.auditRecordState == 3">
          <el-descriptions-item label="审核人">{{
              form.updateBy }}</el-descriptions-item
          >
          <el-descriptions-item label="审核时间">{{
              form.updateTime }}</el-descriptions-item
          >
          <el-descriptions-item label="审核结果">
            <dict-tag
              :options="dict.type.dict_audit_state"
              :value="form.auditRecordState"
            />
          </el-descriptions-item
          >
          <el-descriptions-item label="原因" v-if="form.auditRecordState == 3">{{ form.remark }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <el-button @click="openOrderDetail(form.order.orderId)" v-if="isDetail">换房前订单</el-button>
      <el-button @click="openOrderDetail(form.afterOrderId)" v-if="isDetail&&form.auditRecordState==2">换房后订单
      </el-button>
      <el-form
        v-if="!isDetail"
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="审核结果" prop="auditRecordState">
          <el-radio-group v-model="form.auditRecordState">
            <el-radio label="2">审核通过</el-radio>
            <el-radio label="3">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="form.auditRecordState == 3"
          label="原因"
          :rules="[
            { required: true, message: '请输入原因', trigger: 'change' },
          ]"
          prop="remark"
        >
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <div
        v-if="!isDetail"
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-dialog>
    <!-- 详情 -->
    <order-detail
      v-if="detailDialogVisible"
      v-model="detailDialogVisible"
      :orderId="orderId"
    ></order-detail>
  </div>
</template>

<script>
import formRule from '@/utils/formRule.js'
import { getauditRecord, checkAuditRecord } from '@/api/order/order'
import orderDetail from '../../../order/component/order-detail.vue'

export default {
  name: 'signOrder',
  dicts: ['order_state','dict_audit_state'],
  components: { orderDetail },
  props: {
    title: {
      default: '换房详情'
    },
    value: {
      default: false
    },
    recordId: {
      default: undefined
    },
    isDetail: {
      default: false
    },
    success: {
      type: Function,
      default: () => {
      }
    }
  },
  data() {
    var validateCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择审核结果'))
      } else {
        if (value == 1) {
          callback(new Error('请选择审核结果'))
        }
        callback()
      }
    }
    return {
      visible: false,
      loading: false,
      dialogSelectHouseVisible: false,
      orderId: '',
      // form: {
      //   createBy: "14",
      //   createTime: "2024-04-07 17:47:14",
      //   updateBy: null,
      //   operatorId: null,
      //   updateTime: null,
      //   remark: null,
      //   tenantId: "1",
      //   recordId: 1,
      //   orderId: "O170954687326234299",
      //   auditRecordType: "1",
      //   auditRecordState: "1",
      //   lodgerName: "张三",
      //   lodgerPhone: "18888888888",
      //   address: "义务小区江山栋1单元11房",
      //   order: {
      //     createBy: "1",
      //     createTime: "2024-03-04 18:07:53",
      //     updateBy: "",
      //     operatorId: 1,
      //     updateTime: null,
      //     remark: null,
      //     tenantId: "1",
      //     orderId: "O170954687326234299",
      //     houseId: "H170529000586575593",
      //     estateId: "dc676a88a91a11eea08200163e01f995",
      //     estateName: "义务小区",
      //     buildingId: "01caa574a91c11eea08200163e01f995",
      //     buildingName: "江山",
      //     unitId: "01caec8aa91c11eea08200163e01f995",
      //     unitName: "1",
      //     provinceId: "11",
      //     provinceName: "北京市",
      //     cityId: "1101",
      //     cityName: "市辖区",
      //     districtId: "110101",
      //     districtName: "东城区",
      //     streetId: "110101001",
      //     streetName: "东华门街道",
      //     communityId: "110101001001",
      //     communityName: "多福巷社区居委会",
      //     premisesAddress: "义务小区江山栋1单元11房",
      //     fullAddress: "北京市市辖区东城区东华门街道义务小区江山栋1单元11号",
      //     orderState: "1",
      //     orderTab: "1",
      //     reserveUser: "张三",
      //     reserveUserPhone: "18570467877",
      //     deptId: 103,
      //     checkInTime: "2024-03-05 17:55:00",
      //     checkOutTime: "2024-04-11 17:55:00",
      //     realityCheckInTime: null,
      //     realityCheckOutTime: null,
      //     finallySignTime: "2024-03-06 17:50:21",
      //     rentPaidNumber: 1,
      //     depositPaidNumber: 1,
      //     orderSource: "1",
      //     orderType: "1",
      //     tradingMode: "1",
      //     linkedOrderId: null,
      //     freeRentNumber: 1,
      //     rentalMode: "1",
      //     depositNumber: 1,
      //     payNumber: 1,
      //     deposit: 100.1,
      //     monthRent: 1.1,
      //     totalRent: null,
      //     memberNumber: 0,
      //     orderLessee: {
      //       createBy: null,
      //       createTime: null,
      //       updateBy: null,
      //       operatorId: null,
      //       updateTime: null,
      //       remark: null,
      //       tenantId: null,
      //       lesseeId: null,
      //       houseId: null,
      //       lesseeType: "1",
      //       orderId: null,
      //       lesseeName: "张三",
      //       lesseeSex: null,
      //       cardNumber: "430482199801129613",
      //       enterpriseName: "张三有限责任公司",
      //       phone: "18888888888",
      //       cardImgs: "sdasdasdsadasd",
      //       lesseeState: null,
      //       uscc: null,
      //     },
      //   },
      // },
      form: {
        order: {
          orderLessee: {}
        }
      },
      areaCalculateState: false,
      chargeItemList: [],
      chargeItemSelected: [],
      options: [
        {
          value: 1,
          label: '押一'
        },
        {
          value: 2,
          label: '押二'
        },
        {
          value: 3,
          label: '押三'
        },
        {
          value: 4,
          label: '押四'
        },
        {
          value: 5,
          label: '押五'
        },
        {
          value: 6,
          label: '押六'
        },
        {
          value: 7,
          label: '押七'
        },
        {
          value: 8,
          label: '押八'
        },
        {
          value: 9,
          label: '押九'
        },
        {
          value: 10,
          label: '押十'
        },
        {
          value: 11,
          label: '押十一'
        },
        {
          value: 12,
          label: '押十二'
        }
      ],
      payoptions: [
        {
          value: 1,
          label: '付一'
        },
        {
          value: 2,
          label: '付二'
        },
        {
          value: 3,
          label: '付三'
        },
        {
          value: 4,
          label: '付四'
        },
        {
          value: 5,
          label: '付五'
        },
        {
          value: 6,
          label: '付六'
        },
        {
          value: 7,
          label: '付七'
        },
        {
          value: 8,
          label: '付八'
        },
        {
          value: 9,
          label: '付九'
        },
        {
          value: 10,
          label: '付十'
        },
        {
          value: 11,
          label: '付十一'
        },
        {
          value: 12,
          label: '付十二'
        }
      ],
      detailDialogVisible: false,
      rules: {
        auditRecordState: [
          {
            required: true,
            validator: validateCheck,
            message: '请选择结果',
            trigger: 'change'
          }
        ],
        premisesAddress: [
          { required: true, message: '请选择房间', trigger: 'change' }
        ],
        ['orderLessee.phone']: [
          { required: true, message: '请输入手机', trigger: 'blur' }
        ],
        tenantType: [
          { required: true, message: '请选择身份', trigger: 'blur' }
        ],
        enterpriseName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ],
        legalPerson: [
          { required: true, message: '请输入法人信息', trigger: 'blur' }
        ],
        socialCreditNumber: [
          {
            required: true,
            message: '请输入统一社会信用代码',
            trigger: 'blur'
          }
        ],
        freeRentNumber: [
          {
            required: true,
            message: '请输入免租天数',
            trigger: 'blur'
          }
        ],
        monthRent: [
          {
            required: true,
            message: '请输入月租金',
            trigger: 'blur'
          }
        ],
        deposit: [
          {
            required: true,
            message: '请输入押金',
            trigger: 'blur'
          }
        ],
        ['orderLessee.lesseeName']: [
          {
            required: true,
            message: '请输入姓名',
            trigger: ['change', 'blur']
          }
        ],
        ['orderLessee.phone']: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          {
            validator: formRule.phone,
            message: '',
            trigger: ['change', 'blur']
          }
        ],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        ['orderLessee.cardNumber']: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          {
            validator: formRule.IDCard,
            message: '',
            trigger: ['change', 'blur']
          }
        ],

        period: [
          {
            required: true,
            type: 'array',
            message: '请选择日期',
            trigger: 'change'
          }
        ],
        ['orderLessee.lesseeType']: [
          { required: true, message: '请选择签约方式', trigger: 'change' }
        ]
      }
    }
  },
  computed: {},
  watch: {
    value(newVal, oldVal) {
      if (newVal) {
        this.init()
      }
      this.visible = newVal // 监测value的变化，并赋值。
    },
    visible(val) {
      this.$emit('input', val) // 此处监测visible目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    }
  },
  mounted() {
    this.visible = this.value
  },
  methods: {
    init() {
      //重置
      //this.reset();
      this.getInfo()
    },
    //日期更改
    periodChange(e) {
      this.form.checkInTime = e[0] + ' 00:00:00'
      this.form.checkOutTime = e[1] + ' 23:59:00'
    },
    finallySignChange(e) {
      this.form.finallySignTime = e + ' 23:59:00'
    },
    //重置表单
    reset() {
      this.form = this.$options.data().form
    },
    openOrderDetail(orderId) {
      this.orderId = orderId
      this.detailDialogVisible = true
    },
    formatLabel(value, arr) {
      let data = this[arr].find((item) => {
        return item.value == value
      })
      return data.label
    },
    //获取详情
    getInfo() {
      if (!this.recordId) return
      this.loading = true
      getauditRecord(this.recordId).then((response) => {
        this.form = response.data
        this.loading = false
      }).catch((error) => {
        this.loading = false
      })
    },
    //提交表单
    submitForm: function() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.auditRecordState == 2) {
            delete this.form.remark
          }
          checkAuditRecord(this.form).then((response) => {
            this.$emit('success')
            this.$message.success('审核成功')
            this.visible = false
          })
        }
      })
    },
    //关闭
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.import-dialog {
  height: auto;
  max-height: 80vh;
  overflow-y: auto;

  .dialog-footer {
    text-align: center;
  }
}

::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}

.form-box {
  .tabs {
    display: flex;

    .tabs-item {
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      position: relative;
      cursor: pointer;

      &::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -2px;
        width: 0;
        height: 2px;
        opacity: 0;
        background: #0caaf0;
        transition: all 0.3s;
      }

      &.active {
        color: #0caaf0;

        &::before {
          opacity: 1;
          left: 0;
          width: 100%;
        }

        cursor: default;
      }
    }
  }

  .add-form {
    .section {
      .label {
        display: flex;
        margin-bottom: 20px;
        font-size: 16px;
        align-items: center;
        color: #303133;

        label {
          display: block;
          width: 80px;

          &.dot::before {
            content: "*";
            color: #ff4949;
            margin-right: 4px;
          }
        }

        .icon {
          color: #02a7f0;
          font-size: 30px;
          margin-left: 30px;
          cursor: pointer;
        }
      }

      .tips {
        color: #aaaaaa;
      }

      .custom-formItem-lable {
        display: flex;
        align-items: center;

        .handle-icon {
          color: #02a7f0;
          font-size: 30px;
          margin-left: 30px;
          cursor: pointer;
        }
      }

      .handle-icon {
        color: #02a7f0;
        font-size: 30px;
        cursor: pointer;
      }
    }
  }
}
</style>
